<template>
  <vxe-grid ref='xGrid' v-bind="gridOptions">
    <template #toolbar_buttons>
      <div @keyup.enter="searchEvent">
      <vxe-input v-model="filterName" clearable type="search" placeholder="试试全表搜索"
      @search-click="searchEvent"
      @clear="searchEvent"/>
      </div>
    </template>
  </vxe-grid>
</template>
<script lang="ts" name="RoleDrawerGrantPolicy" setup>
import {reactive, ref, watch} from 'vue';
import {getListData} from '/@/api/admin/policy';
import {policyColumns} from '../data';
import {SizeType, VxeGridProps} from 'vxe-table';
import XEUtils from 'xe-utils';

const props = defineProps({
    show: Boolean,
    ownedList: Array,
});

const xGrid = ref()
const filterName = ref('')
const size = ref<SizeType>('mini')
const gridOptions = reactive<VxeGridProps>({
  border: true,
  resizable: true,
  showHeaderOverflow: true,
  showOverflow: 'tooltip',
  highlightHoverRow: true,
  keepSource: true,
  id: 'xGridGrantPolicy',
  height: window.innerHeight-300,
  size: size.value,
  rowId: 'id',
  columns: policyColumns,
  columnConfig: {
    useKey: true,
    isCurrent: true,
    isHover: true,
  },
  rowConfig: {
    useKey: true,
    isCurrent: true,
    isHover: false,
    keyField: 'id',
  },
  customConfig: {
    storage: true,
  },
  sortConfig: {
    trigger: 'cell',
    remote: false
  },
  filterConfig: {
    remote: false
  },
  toolbarConfig: {
    refresh: true,
    import: false,
    export: false,
    print: false,
    zoom: true,
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  checkboxConfig: {
    reserve: true,
    highlight: true,
    range: true,
    trigger: 'cell',
  },
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query({ page, sort, sorts, filters, form }) {
        return getListData()
      }
    }
  },
});

watch(() => props.ownedList, (v1, _) => {
  if (props.show) {
    getListData().then(dd => {
      xGrid.value.loadData(dd)
      let checkedList = dd.filter(e1 => v1?.some(e2 => e1.id === e2))
      xGrid.value.setCheckboxRow(checkedList, true)
    })
  }
})


const searchEvent = () => {
  const rr = xGrid.value.getTableData();
  let {fullData} = rr;
  const filterName2 = XEUtils.toValueString(filterName.value).trim().toLowerCase()
  if (filterName2) {
    const filterRE = new RegExp(filterName2, 'gi')
    const searchProps = ['groupName', 'name', 'v2', 'v3']
    const rest = fullData.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName2) > -1))
    fullData = rest.map(row => {
      const item = Object.assign({}, row)
      searchProps.forEach(key => {
        item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`)
      })
      return item
    })
    xGrid.value.loadData(fullData)
  } else {
    getListData().then(dd => {
      xGrid.value.loadData(dd)
    })
  }
}

const getCheckedRowList = ():any => {
  return xGrid.value.getCheckboxRecords(true);
}

defineExpose({
  getCheckedRowList
})

</script>
<style scoped>
:deep().keyword-lighten{
  background: yellow;
}
</style>
